<span #self class="n-avatar" [ngClass]="_size" [style]="_style">
  <img [style.objectFit]="objectFit" (error)="handleError($event)" *ngIf="!hasLoadErrorRef && src; else error" [src]="src" alt="" />
  <ng-template #error>
    <img [style.objectFit]="objectFit" *ngIf="fallbackSrc" [src]="fallbackSrc" alt="" />
  </ng-template>
  <!-- 有图片没文字，这里和原版naive逻辑有不同，但是表现一致 -->
  <span *ngIf="!src" #text class="n-avatar__text" [style]="textStyle">
    <!-- 新版本Angular13中，内容投影如果是template则从投影中获取template是注释节点，无法使用ngTemplateOutlet渲染,暂时没有其他办法 -->
    <ng-container *ngIf="defaultContent?.templateRef" [ngTemplateOutlet]="defaultContent?.templateRef"></ng-container>
    <n-resize-observer *ngIf="!defaultContent?.templateRef" [onResize]="fitTextTransform('resize')">
      <!-- angular中无法获取和判断是否有内容投影（插槽），除非在投影上加上指令，或者投影本身是特定组件，才能获取 -->
      <ng-content #content></ng-content>
    </n-resize-observer>
  </span>
</span>
